.small {
  width: 50px;
  height: 20px;
}

.middle {
  width: 60px;
  height: 30px;
}
.large {
  width: 80px;
  height: 35px;
}
.l-button {
  position: relative;
}
.l-button,
.l-button-default {
  background-color: #fff;
  border-radius: 2px;
  &-default {
    color: white;
    border: 1px solid #dcdfe6;
    background-color: #f5f7fa;
    &-disabled {
      cursor: not-allowed;
    }
  }
  &-primary {
    color: #fff;
    background-color: #1890ff;
    &:hover {
      border-color: #79bbff;
      background-color: #79bbff;
    }
    &-disabled {
      border-color: #79bbff;
      background-color: #79bbff;
      cursor: not-allowed;
    }
  }
  &-success {
    color: #fff;
    background-color: #67c23a;
    &:hover {
      border-color: #95d475;
      background-color: #95d475;
    }
    &-disabled {
      border-color: #95d475;
      background-color: #95d475;
      cursor: not-allowed;
    }
  }
  &-info {
    color: #fff;
    background-color: #909399;
    &:hover {
      border-color: #b1b3b8;
      background-color: #b1b3b8;
    }
    &-disabled {
      border-color: #b1b3b8;
      background-color: #b1b3b8;
      cursor: not-allowed;
    }
  }
  &-warn {
    color: #fff;
    background-color: #e6a23c;
    &:hover {
      border-color: #eebe77;
      background-color: #eebe77;
    }
    &-disabled {
      border-color: #eebe77;
      background-color: #eebe77;
      cursor: not-allowed;
    }
  }
  &-danger {
    color: #fff;
    background-color: #f56c6c;
    &:hover {
      border-color: #f89898;
      background-color: #f89898;
    }
    &-disabled {
      border-color: #f89898;
      background-color: #f89898;
      cursor: not-allowed;
    }
  }
}
.round {
  border-radius: 50px;
}
.circle {
  text-align: center;
  border-radius: 50%;
  padding: 20px;
}
